<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>魔力仓库管理</title>
    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">魔力仓库管理</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a>{{request.session.username}}</a></li>
                    <li><a href="{% url 'logout' %}">登出</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>
    <div class="main-content container">
        <div class="row">
            <table id="house-table" class="table table-condensed house-table" style="margin-top: 20px;">
                <tr>
                    <th style="width: 10%">账户Id</th>
                    <th style="width: 10%">人物名</th>
                    <th style="width: 40%">材料</th>
                    <th style="width: 40%">空余</th>
                </tr>
                {% for w in warehouseList %}
                <tr>
                    <td class="account-id" style="vertical-align: middle;">{{ w.accountId }}</td>
                    <td class="player-name" style="vertical-align: middle;">{{ w.name }}</td>
                    <td class="item-list">
                        <div class="row">
                            {% for i in w.items %}
                            <div class="item col-sm-12" {% if i.isLock %}style="background-color: #FFCCCC;" {% endif %}>
                                <h4>
                            <span class="item-name">{{ i.name }}</span>：
                            <span class="num" style="color:{% if not i.isLock %}#99CC66{% else %}#FF6666{% endif %}  ;">{{ i.count }}</span>
                            {% if not i.isLock %}
                            <a class="btn btn-success">
                            可用：{{ i.count }}
                            </a>
                            <button class="btn btn-primary" onclick="lockItem({{ i.id }},{{request.session.userId}});"><i class="fa fa-lock"></i>锁定</button>
                            {% else %}
                            <a class="btn btn-danger">
                            <i class="fa fa-lock"></i>{{ i.lockUsername }}
                            </a>
                            {% if i.lockUser = request.session.userId %}
                            <button class="btn btn-primary" onclick="unlockItem({{ i.id }},{{ i.count }});"><i class="fa fa-lock"></i>解锁</button>
                            {% endif %}
                            {% endif %}
                    </h4>
                            </div>
                            {% endfor %}
                        </div>
                    </td>
                    <td class="item-list">
                        <div class="row">
                            <div class="item col-sm-12" {% if w.isLockBlock %}style="background-color: #FFCCCC;" {% endif %}>
                                <h4>空格：

                                {% if w.isLockBlock %}
                                    <span class="num" style="color:#FF6666;">{{ w.remain }}</span>
                                    <a class="btn btn-danger">
                                        <i class="fa fa-lock"></i>
                                        {{ w.blockLockUsername }}
                                    </a>
                                    {% if w.blockLockUser = request.session.userId %}
                                    <button class="btn btn-primary" onclick="unlockBlock({{ w.id }});"><i class="fa fa-lock"></i>解锁</button>
                                    <button class="btn btn-primary" onclick="btnAddNewItem({{ w.id }});"><i class="fa fa-lock"></i>添加物品</button>
                                    {% endif %}
                                {% else %}
                                    <span class="num" style="color:{% if w.remain > 0 %}#99CC66{% else %}#FF6666{% endif %};">{{ w.remain }}</span>
                                    <a class="btn {% if w.remain > 0 %}btn-success{% else %}btn-danger{% endif %}">
                                        可用：{{ w.remain }}
                                    </a>
                                    <button class="btn btn-primary" onclick="lockBlock({{ w.id }},{{request.session.userId}});"><i class="fa fa-lock"></i>锁定</button>
                                {% endif %}
                    </h4>
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="unlockItemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width: 300px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">使用数量</h4>
                </div>
                <input type="hidden" class="form-control" id="itemId">
                <div class="modal-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="itemUseCount">使用数量</label>
                            <input type="number" class="form-control" id="itemUseCount" placeholder="使用数量" max="20">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doUnlockItem();">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="newItemModal" tabindex="-1" role="dialog" aria-labelledby="newItemModalLabel">
        <div class="modal-dialog" role="document" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="newItemModalLabel">添加物品</h4>
                </div>
                <input type="hidden" class="form-control" id="warehouseId">
                <div class="modal-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="itemUseCount">名称</label>
                            <input type="text" class="form-control" id="newItemName" placeholder="名称">
                        </div>
                        <div class="form-group">
                            <label for="itemUseCount">数量</label>
                            <input type="number" class="form-control" id="newItemCount" placeholder="数量">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="addNewItem();">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    var inModal = false;
    setInterval(function() {
        if (!inModal) {
            location.reload();
        }
    }, 5000);

    $('#unlockItemModal').on('hidden.bs.modal', function(e) {
        inModal = false;
    });
    $('#newItemModal').on('hidden.bs.modal', function(e) {
        inModal = false;
    });

    function lockBlock(warehouse_id, user_id) {
        $.ajax({
            url: "{% url 'lockBlock' %}",
            data: {
                userId: user_id,
                warehouseId: warehouse_id
            },
            async: true,
            success: function(res) {
                if (res.success) {
                    location.reload();
                }
            }
        });
    }

    function unlockBlock(warehouse_id) {
        $.ajax({
            url: "{% url 'unlockBlock' %}",
            data: {
                warehouseId: warehouse_id
            },
            async: true,
            success: function(res) {
                if (res.success) {
                    location.reload();
                }
            }
        });
    }

    function btnAddNewItem(house_id) {
        $("#warehouseId").val(house_id);

        $('#newItemModal').modal('show');
        inModal = true;
    }

    function addNewItem() {
        var warehouseId = $("#warehouseId").val();
        var name = $("#newItemName").val();
        var count = $("#newItemCount").val();

        $.ajax({
            url: "{% url 'addNewItem' %}",
            data: {
                name: name,
                count: count,
                warehouseId: warehouseId
            },
            async: true,
            success: function(res) {
                if (res.success) {
                    location.reload();
                }
            }
        });
    }

    function lockItem(item_id, user_id) {
        $.ajax({
            url: "{% url 'lockItem' %}",
            data: {
                userId: user_id,
                itemId: item_id
            },
            async: true,
            success: function(res) {
                if (res.success) {
                    location.reload();
                }
            }
        });
    }

    function unlockItem(item_id, item_count) {
        $("#itemId").val(item_id);
        $("#itemUseCount").attr('max', item_count);

        $('#unlockItemModal').modal('show');
        inModal = true;
    }

    function doUnlockItem() {
        var itemId = $("#itemId").val();
        var use = $("#itemUseCount").val();

        $.ajax({
            url: "{% url 'unlockItem' %}",
            data: {
                useCount: use,
                itemId: itemId
            },
            async: true,
            success: function(res) {
                if (res.success) {
                    location.reload();
                }
            }
        });
    }
    </script>
</body>

</html>
